<template>
  <div id="chartLinkMain" ref="chartLink" style="width:99%; height:255px;margin-top:10px;"></div>
</template>

<script>
import { getTrend } from '@/api/home'
import { Loading } from 'element-ui' // echarts theme
import resize from './mixins/resize'
export default {
  mixins: [resize],
  data () {
    return {
      chart: null,
      loadingInstance: null,
      trendLineData: [],
      timeList: [],
      titleData: []
    }
  },
  mounted () {
    this.initChart()
    this.$nextTick(() => {
      if (document.getElementById('chartLinkMain')) {
        this.loadingInstance = Loading.service({
          target: '#chartLinkMain',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      this.listData()
      this.timer = setInterval(() => {
        this.listData()
      }, 300000)
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  methods: {
    init () {
      // await this.initChart()
      this.listData()
    },
    listData (val) {
      getTrend().then(res => {
        if (res.status === 0) {
          this.timeList = res.info.TIME
          this.trendLineData = []
          this.titleData = []
          for (let item in res.info) {
            if (item !== 'TIME') {
              this.titleData.push(item)
              this.trendLineData.push({
                name: item,
                type: 'line',
                // showSymbol: false,
                data: res.info[item]
              })
            }
          }
          this.chart.setOption(this.option(this.trendLineData, this.timeList, this.titleData), true)
          if (this.loadingInstance) {
            this.loadingInstance.close()
            this.loadingInstance = null
          }
        }
      }).catch(e => {
        if (this.timer) {
          clearInterval(this.timer)
        }
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
        }
      })
    },
    option (val, time, title) {
      var data = {
        color: ['#ee6666', '#fac858', '#5ab1ef', '#009966', '#d87a80',
          '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
          '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
          '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'],
        title: {
          // text: '日志趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          padding: [0, 40],
          data: title
          // data: ['PLC设备1', 'PLC设备2', 'PLC设备3', 'PLC设备4', 'PLC设备5']
        },
        grid: {
          left: '4%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          right: 30,
          feature: {
            saveAsImage: {
              title: this.$t('保存为图片')
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          name: this.$t('时间'),
          data: time
        },
        yAxis: {
          type: 'value',
          name: ''
        },
        series: val
      }
      return data
    },
    initChart (data) {
      this.chart = this.$echarts.init(this.$el)
      // this.chart.setOption(this.option(this.trendLineData, this.timeList, this.titleData), true)
    }
  }
}
</script>
